<template>
  <div
    class="vue-scroll"
    @touchstart="touchStart($event)"
    @touchmove="touchMove($event)"
    @touchend="touchEnd($event)"
  >
    <p v-if="refreshs">下拉刷新</p>
    <slot></slot>
    <p v-if="loadmore">上拉加载</p>
  </div>
</template>

<script>
import { getlist } from "@/utils/common.js";
export default {
  props: {
    // 请求数据的地址
    url: "",

    // 请求参数
    param: {
      type: Object,
    },
    pageNoName: {
      default: "page_no",
    },
    //pagenum的名字
  },
  data() {
    return {
      clientHeight: "",
      scrollTopStart: "",
      pageHeight: "",
      startY: "",
      clientY: "",
      hasMove: "",
      scrollTopEnd: "",
      currPageNo: 1,
      // pageSize: 10,
      list: [],
      refreshs: false,
      loadmore: false,
    };
  },
  mounted() {
    this.refresh();
  },
  methods: {
    touchStart(e) {
      // 屏幕高度
      this.clientHeight = parseInt(`${document.documentElement.clientHeight}`);

      //滚动开始页面距顶距离
      this.scrollTopStart = window.scrollY;
      // 页面高度
      this.pageHeight = e.currentTarget.clientHeight;
      // 触摸距离页面起点
      this.startY = e.targetTouches[0].pageY;
      // 触摸距离屏幕起点
      this.clientY = e.targetTouches[0].clientY;
    },
    touchEnd(e) {
      if (!this.hasMove) return;
      this.hasMove = false;
      // 滚动结束页面距顶距离
      this.scrollTopEnd = window.scrollY;
      var sLength = this.scrollTopEnd - this.scrollTopStart;
      if (
        this.clientHeight + this.startY + sLength + 15 >=
        this.pageHeight + this.clientY
      ) {
        this.nextPage(); //页面加载
      } else if (this.startY + sLength <= this.clientY) {
        this.refresh(); //页面刷新
      }
    },
    touchMove(e) {
      this.hasMove = true;
    },
    //主要是计算出一个距离 到了某个程度执行下拉刷新或者上拉加载

    refresh() {
      this.refreshs = true;
      //这个变量控制下拉刷新提示是否显示
      this.currPageNo = 1;
      //下拉刷新的时候页码变成1，数据清空
      this.list = [];

      this.getparams();
      //拼接参数
      getlist(this.url, this.param).then((res) => {
        this.list = res.data;
        //请求axios第一页的数据

        this.$emit("send-data", this.list);
        //拿到数据子传父  传到父组件
        this.refreshs = false;
        //  状态变成false 下拉刷新四个字隐藏
      });
    },
    nextPage() {
      //上拉加载请求下一页的数据
      this.loadmore = true;
      //让上拉加载四个字出现
      this.currPageNo++;
      //页码+-

      this.getparams();
      //拼接参数
      getlist(this.url, this.param).then((res) => {
        this.list = [...this.list, ...res.data];
        //把请求到的数据 通过展开的方法跟上一页的数据合并
        this.$emit("send-data", this.list);
        //把数据发给父组件
        this.loadmore = false;
        //关闭加载状态 四个字消失
      });
    },
    getparams() {
      //拼接参数的方法
      if (typeof this.param === "string") {
        this.param = JSON.parse(this.param);
      }
      // 如果不是对象转化为对象
      this.param[this.pageNoName] = this.currPageNo;
      //把当前的页码拼接进参数里
    },
  },
  watch: {
    param: {
      deep: true,
      immediate: true,
      handler() {
        getlist(this.url, this.param).then((res) => {
          this.list = res.data;
          //请求axios第一页的数据

          this.$emit("send-data", this.list);
          //拿到数据子传父  传到父组件
          this.refreshs = false;
          //  状态变成false 下拉刷新四个字隐藏
        });
      },
    },
  },
};
</script>

<style lang="scss"></style>
